<template>
  <div class="login-container">
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      class="login-form"
      autocomplete="on"
      label-position="left"
      size="small"
    >
      <div class="title-container">
        <h3 class="title">Vue Admin</h3>
      </div>
      <el-form-item prop="username">
        <el-input prefix-icon="el-icon-user" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input prefix-icon="el-icon-lock" type v-model="form.password" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="medium"
          style="width: 100%"
          type="primary"
          :loading="state.loading"
          @click="submitForm()"
          >{{t('login.login')}}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import store from '@/store'
import { validate } from '@/utils/formExtend'
import { validateUsername, validatePassword } from '@/utils/validate'
import { reactive, ref } from '@vue/reactivity'
import { useRouter } from 'vue-router'
import { useI18n } from "vue-i18n";

const { t } = useI18n()

const $router = useRouter()
const ruleForm = ref(null)
const form = reactive({
  username: 'admin',
  password: '123456'
})
const state = reactive({
  loading: false
})
const rules = reactive({
  username: [{ required: true, trigger: 'blur', validator: validateUsername }],
  password: [{ required: true, trigger: 'blur', validator: validatePassword }]
})
// 登录
const submitForm = async () => {
  const { username, password } = form
  if (!(await validate(ruleForm.value))) return
  state.loading = true
  const params = {
    password,
    username
  }
  try {
    await store.dispatch('user/login', params)
    state.loading = false
    $router.push('/')
  } catch (error) {
    console.log(error)
  }
}
</script>

<style lang="scss" scoped>
$bg: #f0f2f5;
$icon_gray: #889aa4;
.login-container {
  overflow: hidden;
  background-color: $bg;
  height: 100vh;
  width: 100%;
  .login-form {
    overflow: hidden;
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 220px 35px 0;
    margin: auto;
    .title-container {
      position: relative;
      .title {
        font-size: 20px;
        color: #000;
        margin: 0px auto 20px auto;
        text-align: center;
        font-weight: bold;
      }
    }

    :deep(.el-input) {
      display: inline-block;
      .el-input__inner {
        background: transparent;
        -webkit-appearance: none;
        color: #000;
        border: none;
        border-radius: 0px;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px #fff inset !important;
          // box-shadow: 0 0 0px 1000px #24539e inset !important;
          // -webkit-text-fill-color: #fff !important;
        }
      }
    }
    :deep(.el-form-item) {
      background: #fff;
      margin-bottom: 22px;
      color: #454545;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 5px;
    }

    :deep(.el-button--medium) {
      padding: 12px 20px;
    }
  }
}
</style>
